<template>
  <div ref="refTodaySchedule" class="today-schedule-wrap">
    <div class="top flex items-center justify-between">
      <div class="flex items-center">
        <div class="title">日程</div>
        <div class="date">{{dayjs(new Date()).format('M月D日')}}</div>
        <div class="count">
          <p v-if="schedulelist.length==0">今日无日程</p>
          <p v-else>今日有<span>{{schedulelist.length}}</span>个日程</p>
        </div>
      </div>
      <img class="more" src="@/assets/icon/icon-more.png" alt="">
    </div>
    <div class="content" v-if="schedulelist.length>0">
      <van-swipe :autoplay="3000" indicator-color="#3A75C5" vertical>
        <van-swipe-item v-for="(item, index) in schedulelist" :key="index" @click="onClick(item)">
          <p class="ellipsis-2"><span v-if="schedulelist.length>1">{{index+1}}、</span>{{item.content}}</p> 
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import HomeServe from '@/api/home'
import dayjs from 'dayjs'
defineOptions({
  name: 'TodaySchedule'
})

const emit = defineEmits([])
const router = useRouter()


//查询日程
const schedulelist = ref<RecordType[]>([])
const getScheduleList = () => {
  let date = dayjs(new Date()).format('YYYY-MM-DD')
  let params = {
    scheduleDate: date
  }
  HomeServe.getScheduleHelperList(params).then(res => {
    schedulelist.value = res.data;
  })
}

getScheduleList();

const handleSearchClick = () => {
  router.push({
    path: '/search'
  })
}

</script>

<style lang="less" scoped>
.today-schedule-wrap {
  border-radius: 6px;
  background: rgba(255,255,255,1);
  margin: 11px 11px;
  padding: 3px;
  .top{
    font-size: 13px;
    color: #000;
    border-radius: 6px;
    padding: 6px 8px;
    background: linear-gradient(90deg, #FFF5EA 0%, #FFFFFF00 70%);

    .title{
      width: 49px;
      height: 23px;
      line-height: 23px;
      background: url("@/assets/home/schedule-bg.png") no-repeat;
      background-size: 52px 27px;
      text-align: center;
      color: #fff;
    }
    .date{
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      border-radius: 24px;
      background: rgba(255, 146, 25,0.1);
      color: #FF9219;
      font-weight: bold;
      padding: 0 10px;
      margin: 0 10px 0 8px;
    }
    .count{
      span{
        color: #FF9219;
        font-weight: bold;
        padding: 0 2px;
      }
    }
    .more{
      width: 12px;

    }
  }
  .content{
    padding: 8px 9px;
    color: #00000099;
    font-size: 12px;
    line-height: 16px;
    .van-swipe{
      height: 36px;
      :deep(.van-swipe__indicators){
        display: none;
      }
      :deep(.van-swipe-item){
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
